<template>
  <div class="flex items-center relative">
    <div class="flex gap-10 items-center">
      <p
        class="heading-2xl-semi text-c-grey-3xl cursor-pointer"
        @click="onServiceTitleClick"
      >
        Контакты
      </p>
      <MoleculePageSwitcher />
    </div>
    <div class="grow"></div>
    <div class="flex gap-6 items-center">
      <!-- Hide PP-102 -->
      <!-- <MoleculeLocaleSwitcher /> -->
      <div ref="hoverContainer">
        <div class="cursor-pointer h-[36px] w-[36px]">
          <img
            v-if="computedPhoto && !photoPending"
            :src="computedPhoto"
            class="rounded-full"
          />
          <Skeletor v-else-if="photoPending" circle size="36" />
          <SvgoErrAva v-else filled :font-controlled="false" />
        </div>
        <div
          v-show="isHovered"
          class="absolute min-w-[234px] top-14 px-2 pt-5 pb-2 z-50 right-0 flex flex-col bg-c-white shadow-dropdown-s rounded-xl"
        >
          <p class="heading-m-medium text-c-grey-3xl px-3 pb-2">
            {{ fullName }}
          </p>
          <div
            class="flex items-center gap-3 px-4 py-[10px] cursor-pointer hover:bg-c-grey-xs rounded-xl"
            @click="handleShowMyInfo"
          >
            <SvgoProfile filled />
            <p class="heading-s-medium text-c-grey-2xl">Мои контакты</p>
          </div>
          <div
            class="flex items-center gap-3 px-4 py-[10px] cursor-pointer hover:bg-c-grey-xs rounded-xl"
            @click="signOut"
          >
            <SvgoLogout filled />
            <p class="heading-s-medium text-c-grey-2xl">Выйти</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useBroadcastChannel } from '@vueuse/core'
import { useUserManagerStore } from '~/stores/userManagerStore'
import { useUserStore } from '~/stores/userStore'
import { ApiEndpoints } from '~/types/ApiEndpoints'

const hoverContainer: Ref<null | HTMLElement> = ref(null)
const isHovered = useElementHover(hoverContainer, { delayLeave: 500 })
const userManagerStore = useUserManagerStore()
const userStore = useUserStore()
const router = useRouter()

const { data: dataFromBroadcast, post } = useBroadcastChannel({
  name: 'logout-broadcast-channel'
})

const fullName = computed(() => {
  if (userStore.user.firstNameRu && userStore.user.lastNameRu) {
    return userStore.user.lastNameRu + ' ' + userStore.user.firstNameRu
  } else return '-'
})

const currentUserId = computed(() => userStore.user.id)

const { data: userPhotoBuffer, pending: photoPending } = await useAPILazyFetch(
  ApiEndpoints.GET_USER_PHOTO,
  {
    query: { contactId: currentUserId }
  }
)
const computedPhoto = computed(() => {
  if (userPhotoBuffer.value) {
    return useBufferToImgSrc(useUnProxy(userPhotoBuffer)?.data)
  }
  return ''
})

const handleShowMyInfo = () => {
  router.push({
    query: { contactId: userStore.user.id }
  })
}

watch(dataFromBroadcast, () => {
  if (dataFromBroadcast.value.toString().includes('Logout!')) {
    userManagerStore.userManager.signOut()
  }
})

const signOut = () => {
  post('Logout!' + Date.now())
  userManagerStore.userManager.signOut()
}

const onServiceTitleClick = () => {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  })
}
</script>

<style scoped></style>
